<template>
  <div class="container">
    <div class="row">
      <div class="col-3">
        <!-- 占三份 --> <!-- 头像 -->
        <div class="card">
          <div class="card-body">
            <img :src="$store.state.user.photo" style="width: 100%" />
          </div>
        </div>
      </div>
      <!-- Bot展示页 -->
      <div class="col-9">
        <div class="card">
          <div class="card-header">
            <span style="font-size: 130%">我的Bot</span>
            <!-- 弹出框按钮 -->
            <button type="button" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#add-bot-Modal"> 创建 </button>
            <!-- 弹出框 -->
            <div class="modal fade" id="add-bot-Modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" >
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h1 class="modal-title fs-5" id="Modal title"> 创建Bot </h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button>
                  </div>
                  <div class="modal-body">
                    <div class="mb-3">
                      <label for="add-bot-title" class="form-label">名称</label>
                      <input v-model="botadd.title" type="text" class="form-control" id="add-bot-title" placeholder="请输入Bot的名称" />
                    </div>
                    <div class="mb-3">
                      <label for="add-bot-description" class="form-label" > 简介 </label >
                      <textarea v-model="botadd.description" class="form-control" id="add-bot-description" rows="3" ></textarea>
                    </div>
                    <div class="mb-3">
                      <label class="form-label" > 代码 </label>
                      <VAceEditor v-model:value="botadd.content" @init="editorInit" lang="c_cpp"
                                                theme="textmate" style="height: 300px" :options="{
                                                    enableBasicAutocompletion: true, //启用基本自动完成
                                                    enableSnippets: true, // 启用代码段
                                                    enableLiveAutocompletion: true, // 启用实时自动完成
                                                    fontSize: 18, //设置字号
                                                    tabSize: 4, // 标签大小
                                                    showPrintMargin: false, //去除编辑器里的竖线
                                                    highlightActiveLine: true,
                                                }" />
                    </div>
                  </div>
                  <div class="modal-footer">
                    <div class="error-message">{{ botadd.error_message }}</div>
                    <button type="button" class="btn btn-primary" @click="add_bot">创建</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" > 取消 </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- Bot列表 -->
          <div class="header-body">
            <table class="table table-striped table-hover">
              <thead>
                <tr>
                  <th scope="col">名称</th>
                  <th scope="col">创建时间</th>
                  <th scope="col">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="bot in bots" :key="bot.id">
                  <td>{{ bot.title }}</td>
                  <td>{{ bot.createtime }}</td>
                  <td>
                    <button type="button" class="btn btn-primary"  data-bs-toggle="modal" :data-bs-target="'#update-bot-btn-'+bot.id">编辑</button>
                    <!-- 弹出框 --> 
                    <div class="modal fade" :id="'update-bot-btn-'+bot.id" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" >
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h1 class="modal-title fs-5" id="Modal title"> 修改Bot </h1>
                                    <!-- 关闭按钮 -->
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button>
                                </div>
                                <div class="modal-body">
                                    <div class="mb-3">
                                        <label for="update-bot-title" class="form-label">名称</label>
                                        <input v-model="bot.title" type="text" class="form-control" id="update-bot-title"  />
                                    </div>
                                    <div class="mb-3">
                                        <label for="exampleFormControlTextarea1" class="form-label" >简介 </label >
                                        <textarea v-model="bot.description" class="form-control" id="add-bot-description" rows="3" ></textarea>
                                    </div>
                                    <div class="mb-3">
                                        <label for="update-bot-content" class="form-label" >代码</label>
                                        <VAceEditor v-model:value="bot.content" @init="editorInit"
                                                                lang="c_cpp" theme="textmate" style="height: 300px"
                                                                :options="{
                                                                    enableBasicAutocompletion: true, //启用基本自动完成
                                                                    enableSnippets: true, // 启用代码段
                                                                    enableLiveAutocompletion: true, // 启用实时自动完成
                                                                    fontSize: 18, //设置字号
                                                                    tabSize: 4, // 标签大小
                                                                    showPrintMargin: false, //去除编辑器里的竖线
                                                                    highlightActiveLine: true,
                                                                }" />
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <div class="error-message">{{ bot.error_message }}</div>
                                    <button type="button" class="btn btn-primary" @click="update_bot(bot)">修改</button>
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> 取消 </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    &nbsp;
                    <button type="button" class="btn btn-danger" @click="remove_bot(bot)">删除</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive } from "vue";
import { ref } from "vue";
import { useStore } from "vuex";
import $ from "jquery";
//代码编辑器
import { VAceEditor } from 'vue3-ace-editor';
import ace from 'ace-builds';
//解决代码编辑器高亮
import 'ace-builds/src-noconflict/mode-c_cpp';
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/theme-chrome';
import 'ace-builds/src-noconflict/ext-language_tools';



export default {
  components: {
    VAceEditor,
  },
  setup() {
    //使用vuex
    const store = useStore();
    //bots用于保存getlist返回的bot列表
    let bots = ref([]); 
    //创建一个添加的响应式对象
    const botadd = reactive ({
        title:"",
        description:"",
        content:"",
        error_message:""
    });
    //添加Bot
    const add_bot = ()=>{
        botadd.error_message="";
        $.ajax({
            url:"https://app6770.acapp.acwing.com.cn/api/user/bot/add/",
            type:"post",
            data:{
                title:botadd.title,
                description:botadd.description,
                content:botadd.content,
            },
            headers:{
            Authorization:"Bearer " + store.state.user.token,
            },
            success(resp){
                if(resp.error_message === "success"){
                    botadd.title = "";
                    botadd.description = "";
                    botadd.content = "";
                    //关闭Modal框
                    $('.btn-close').click();  
                    refresh_bots();
                }else{
                    botadd.error_message = resp.error_message;
                    console.log(resp.error_message);
                }
            }
        })
    }
    //移除Bot
    const remove_bot = (bot)=>{
        $.ajax({
            url:"https://app6770.acapp.acwing.com.cn/api/user/bot/remove/",
            type:"post",
            headers:{
                Authorization: "Bearer " + store.state.user.token,
            },
            data:{
                bot_id:bot.id
            },
            success(resp){
                if(resp.error_message === "success" ){
                    console.log("删除成功");
                    refresh_bots();
                }else{
                    alert(resp.error_message);
                }
            }
        })
    }
    //更新Bot
    const update_bot = (bot) => {
    bot.error_message = "";
    $.ajax({
        url: "https://app6770.acapp.acwing.com.cn/api/user/bot/update/",
        type: "post",
        data: {
            bot_id:bot.id,
            title: bot.title,
            description: bot.description,
            content: bot.content,
        },
        headers: {
            Authorization: "Bearer " + store.state.user.token,
        },
        success(resp) {
            if (resp.error_message === "success") {
                $('.btn-close').click();  
                alert("修改成功");
                refresh_bots();
            } else {
                bot.error_message = resp.error_message;
            }
        }
    })
    }
    //查询bot列表
    const refresh_bots = () => {
      $.ajax({
        url: "https://app6770.acapp.acwing.com.cn/api/user/bot/getlist/",
        type: "get",
        headers: {
          Authorization: "Bearer " + store.state.user.token,
        },
        success(resp) {
          bots.value = resp;
        },
      });
    }; 
    //初始化代码编辑器
    ace.config.set(
            "basePath",
            "https://cdn.jsdelivr.net/npm/ace-builds@" +
            require("ace-builds").version +
            "/src-noconflict/")
    //调用函数（初始化bot列表）
    refresh_bots(); 
    return {
      bots,
      botadd,
      add_bot,
      remove_bot,
      update_bot,
    };
  },
};
</script>
<style scoped>
.card {
  margin-top: 20px;
}
.error-message{
    color:red;
}
</style>